<template>
  <!--设置指标贴设计弹窗-->
  <div class="modal fade modalMeasureStickerDesign" role="dialog" id="modalMeasureStickerDesign">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
          <h4 class="modal-title">设计指标贴样式</h4>
        </div>
        <div class="modal-body">
          <div>
            <div class="tabbable" id="tabs-MeasureStickerDesign">
              <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#panel-MeasureStickerDesign-00">快速配置</a></li>
                <li><a data-toggle="tab" href="#panel-MeasureStickerDesign-01">显示配置</a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane active" id="panel-MeasureStickerDesign-00">
                  <div class="panel panel-default">
                    <div class="panel-body">
                    </div>
                  </div>
                </div>
                <div class="tab-pane" id="panel-MeasureStickerDesign-01">
                  <div class="panel panel-default">
                    <div class="panel-body">
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                          <input type="text" placeholder="请输入标题" class="form-control" v-model="style.title.content"/>
                          如：门诊挂号人数
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标题字体</label>
                        <div class="col-sm-10">
                          <select class="form-control" v-model="style.title.fontFamily">
                            <option v-for="font in fonts" v-bind:value="font.name">{{ font.name }}</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标题颜色</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.title.color"/>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标题文字大小</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" v-model="style.title.fontSize"/>
                          如：14px（标题文字大小）
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">度量文字字体</label>
                        <div class="col-sm-10">
                          <select class="form-control" v-model="style.measure.fontFamily">
                            <option v-for="font in fonts" v-bind:value="font.name">{{ font.name }}</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">度量文字大小</label>
                        <div class="col-sm-10">
                          <input type="text" placeholder="请输入文字大小" class="form-control"
                                 v-model="style.measure.fontSize"/>
                          如：30px（度量数字大小）
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">度量文字颜色</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.measure.color"/>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标题与度量间隔</label>
                        <div class="col-sm-10">
                          <input type="text" placeholder="请输入间隔大小" class="form-control" v-model="style.measure.marginBottom"/>
                          如：10px
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">比值文字字体</label>
                        <div class="col-sm-10">
                          <select class="form-control" v-model="style.percent.fontFamily">
                            <option v-for="font in fonts" v-bind:value="font.name">{{ font.name }}</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">比值文字大小</label>
                        <div class="col-sm-10">
                          <input type="text" placeholder="请输入文字大小" class="form-control"
                                 v-model="style.percent.fontSize"/> 如：30px（百分比数字大小）
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">比值颜色（升）</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.percent.color1"/>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">比值颜色（降）</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.percent.color2"/>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标识代码</label>
                        <div class="col-sm-10">
                          <input type="text" placeholder="请输入标识代码" class="form-control" v-model="style.icon.class"/>
                          如：fa fa-dashboard
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标识大小</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" v-model="style.icon.fontSize"/> 如：64px（标识大小）
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">标识颜色</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.icon.color"/>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">背景色</label>
                        <div class="col-sm-10">
                          <input type="color" class="form-control" v-model="style.backgroundColor"/>
                          &nbsp;
                          <label>
                            <input type="checkbox" v-model="style.bgNoColor" title="勾选此项时，背景将显示底色"/>透明背景
                          </label>
                        </div>
                      </div>
                      <div class="form-group col-sm-12">
                        <label class="col-sm-2 control-label">间距</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" v-model="style.padding"
                                 placeholder="10px 20px 10px 20px"/> 如：10px 20px 10px 20px（上右下左）
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-ok" v-on:click="confirm">确定</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ShareData} from "@/components/data/sharedata";
import {store} from "@/components/chart/common/store";

const dict_theme = [
  {
    Name: "black1",
    Iocn: "black1.png",
    ClassName: "",
    Order: 0
  }, {
    Name: "black2",
    Iocn: "black2.png",
    ClassName: "blackMeasureSticker",
    Order: 1
  }, {
    Name: "blue1",
    Iocn: "blue1.png",
    ClassName: "blueMeasureSticker_1",
    Order: 2
  }, {
    Name: "blue2",
    Iocn: "blue2.png",
    ClassName: "blueMeasureSticker_2",
    Order: 3
  }, {
    Name: "murasaki1",
    Iocn: "murasaki1.png",
    ClassName: "purpleMeasureSticker_1",
    Order: 4
  }, {
    Name: "murasaki2",
    Iocn: "murasaki2.png",
    ClassName: "purpleMeasureSticker_2",
    Order: 5
  }
];

const dict_theme_b = [
  {
    Name: "red",
    Iocn: "b/red.png",
    ClassName: "b_redMeasureSticker",
    Order: 0
  }, {
    Name: "blue",
    Iocn: "b/blue.png",
    ClassName: "b_blueMeasureSticker",
    Order: 1
  }, {
    Name: "yellow",
    Iocn: "b/yellow.png",
    ClassName: "b_yellowMeasureSticker",
    Order: 2
  }
];

export default {
  name: "measureSticker",
  data() {
    return {
      ThemeType: "999",
      fonts: ShareData.Fonts,
      dict_theme: dict_theme,
      dict_theme_b: dict_theme_b,
      style: {
        padding: '24px 0px 0px 20px',
        backgroundColor: '',
        //标题
        title: {
        },
        //比值
        percent: {
        },
        //度量
        measure: {
        },
        //图标
        icon: {
        }
      },
      event_confirm: {}
    }
  },
  methods: {
    init: function () {
      const _this = this
      let dict_theme = this.dict_theme
      //初始化tab0
      var $tab0 = $("#panel-MeasureStickerDesign-00 .panel-body").empty();
      if (!store.darkMode) {
        dict_theme = Enumerable.from(dict_theme_b).orderBy("x=>x.Order").toArray();
      } else {
        dict_theme = Enumerable.from(dict_theme).orderBy("x=>x.Order").toArray();
      }
      //dict_theme = Enumerable.from(dict_theme).orderBy("x=>x.Order").toArray();
      dict_theme.forEach(function (item) {
        $("<div>").addClass("tabledesign_mode").append(function () {
          return $("<a>").addClass("thumbnail").attr({"href": "javascript:void(0)"}).append(function () {
            return $("<img>").data("theme", item.ClassName).attr({"src": require("@/assets/images/MeasureSticker/" + item.Iocn)});
          });
        }).appendTo($tab0);
      });
      $("#panel-MeasureStickerDesign-00 .panel-body .tabledesign_mode img").bind("click", function () {
        _this.ThemeType = $(this).data("theme");
        _this.ShowConfig.mainColor = '';
        _this.ShowConfig.bgColor = '';
        _this.ShowConfig.showType = '0';
        _this.ShowConfig.showIcon = '';
        _this.ShowConfig.showIconColor = '';
        _this.ShowConfig.showTitleColor = '';
        _this.ShowConfig.borderType = '0';
        _this.ShowConfig.mainPadding = "";
      });

      this.ThemeType = "999";
    },
    confirm: function () {
      const _this = this;
      const $modal = $("#modalMeasureStickerDesign")
      $modal.modal("hide");
      const event_confirm = _this.event_confirm
      if (event_confirm) {
        let config = {
          style: _this.style
        };
        event_confirm(config);
      }
    },
    show(config, callback) {
      const _this = this;
      const $modal = $("#modalMeasureStickerDesign")
      $modal.modal("show");
      _this.event_confirm = callback;
      _this.init()
      Object.assign(_this.style, config.style)
      if (config && config.ThemeType) {
        _this.ThemeType = config.ThemeType;
      }
    }
  }
}
</script>

<style scoped>

</style>
